<template>
  <view class="information">
    <view class="infor_attr">
      <button
        type="balanced"
        open-type="chooseAvatar"
        style="
          border-radius: 50%;
          width: 236rpx;
          height: 236rpx;
          padding: 0;
          margin: 0;
          border: none;
        "
        @chooseavatar="chooseavatar"
      >
        <view class="infor_attr_img">
          <image :src="member.avatar"></image>
        </view>
      </button>
      <view class="infor_add">
        <uni-icons type="camera-filled" size="30" color="#ccc"></uni-icons>
      </view>
    </view>
    <view class="infor_content">
      <view class="infor_content_title"> 个人资料 </view>
    </view>
    <view class="infor_form">
      <view style="flex: 1">
        <view class="infor_form_item infor_name">
          <view class="infor_form_hd">
            <view class="info_label"> 昵称 </view>
          </view>
          <view class="infor_form_bd">
            <input
              type="nickname"
              placeholder="请输入昵称"
              placeholder-class="placeholder"
              v-model="member.name"
            />
            <uni-icons type="right" size="20" color="#ccc"></uni-icons>
          </view>
        </view>
        <view class="infor_form_item infor_phone">
          <view class="infor_form_hd">
            <view class="info_label"> 手机号 </view>
          </view>
          <view class="infor_form_bd">
            <input
              type="number"
              placeholder="请输入手机号"
              placeholder-class="placeholder"
              maxlength="11"
              v-model="member.phone"
            />
            <uni-icons type="right" size="20" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>
      <view class="infor_btns">
        <view class="infor_back" @tap="backref()"> 返回 </view>
        <view class="infor_save" @tap="inforSave()"> 保存 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { upDateInfo, getMyInfo, upLoadFile } from "../../api/api.js";
const defaultAvatarUrl = "../../static/image/avator.png";
export default {
  data() {
    return {
      member: {
        name: "-",
        phone: "-",
        avatar: defaultAvatarUrl,
      },
      openid: "",
    };
  },
  onLoad() {
    this.queryMyInfo();
  },
  methods: {
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    queryMyInfo() {
      getMyInfo().then((res) => {
        this.openid = res.data.openid;
        this.member.name = res.data.userName;
        this.member.phone = res.data.userPhone;
        this.member.avatar = res.data.userImg;
      });
    },
    inforSave() {
      uni.showLoading({
        title: "保存中...",
      });
      upDateInfo({
        userName: this.member.name,
        userImg: this.member.avatar,
        userPhone: this.member.phone,
        openid: this.openid,
      })
        .then(() => {
          uni.showToast({
            title: "保存成功",
            duration: 1000,
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1200);
        })
        .catch(() => {
          uni.showToast({
            title: "保存失败",
            icon: "error",
            duration: 1000,
          });
        })
        .finally(() => {
          setTimeout(() => {
            uni.hideLoading();
          }, 1000);
        });
    },
    chooseavatar(e) {
      const { avatarUrl } = e.detail;
      const { openid } = this;
      uni.uploadFile({
        url: upLoadFile(),
        method: "POST",
        filePath: avatarUrl,
        name: "file",
        header: {
          token: uni.getStorageSync("token"),
          openid: openid,
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
          this.member.avatar = data.url;
        },
        fail: (err) => {
          uni.showToast({
            title: "上传失败",
            icon: "error",
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
}
.information {
  padding-top: 80rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  background: linear-gradient(180deg, #ff8d1a 12.5%, #ffc300 55%);

  .infor_attr {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280rpx;
    height: 280rpx;
    margin-left: 100rpx;
    border-radius: 50%;
    background-color: #ffffff;
    .infor_attr_img {
      width: 236rpx;
      height: 236rpx;
      image {
        width: 236rpx;
        height: 236rpx;
        border-radius: 50%;
      }
    }
    .infor_add {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
  .infor_content {
    width: 100%;
    height: 270rpx;
    // background: url("../../static/image/memberCenter/bk-profil.svg") no-repeat -220rpx -150rpx;
    margin-top: -60rpx;
    padding: 130rpx 50rpx 0;
    .infor_content_title {
      color: #53586e;
      font-size: 52rpx;
    }
  }
  .infor_form {
    background-color: #fff;
    margin-top: -60rpx;
    padding: 0 40rpx;
    display: flex;
    flex-direction: column;
    flex: 1;
    .infor_form_item {
      padding-top: 30rpx;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #ccc;
      .infor_form_hd {
        display: flex;
        justify-content: space-between;
        .info_label {
          color: #868686;
          font-size: 24rpx;
        }
        .info_edit {
          display: flex;
          align-items: center;
          color: #3f4870;
          font-size: 24rpx;
          image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 8rpx;
          }
        }
      }
      &.infor_sex {
        .infor_form_bd {
          padding: 0 20rpx;
          .radio {
            margin-right: 60rpx;
          }
        }
      }
      .infor_form_bd {
        position: relative;
        margin-top: 14rpx;
        display: flex;
        align-items: center;
        input {
          color: #010f07;
          font-size: 24rpx;
          flex: 1;
          &.placeholder {
            color: #666;
          }
        }
        image {
          position: absolute;
          right: -10rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 160rpx;
          height: 50rpx;
        }
      }
    }
    .infor_btns {
      display: flex;
      justify-content: space-between;
      margin-top: 50rpx;
      margin-bottom: calc(24rpx + env(safe-area-inset-bottom));
      .infor_back {
        width: 48%;
        height: 100rpx;
        border-radius: 100rpx;
        border: 1rpx solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #666;
      }
      .infor_save {
        width: 48%;
        height: 100rpx;
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 28rpx;
        background: linear-gradient(180deg, #ff8d1a 12.5%, #ffc300 100%);
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>
